<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>webgl入门</title>
  <script src="./ThreeJs/js/three.js" type="text/javascript"></script>
  <script src="./ThreeJs/js/OrbitControls.js"></script>
  <style>
    body {
      margin: 0;
      color: rgb(161, 10, 10);
    }
  </style>
</head>

<body onload="main();">
  <canvas id="canvas" style="display: none;">你的浏览器不支持canvas</canvas>
</body>
<script>
  let scene, camera, renderer, light, mesh, controls

  //初始化渲染器
  function initRenderer() {
    renderer = new THREE.WebGLRenderer({ antialias: true })
    renderer.setPixelRatio(window.devicePixelRatio)
    renderer.setSize(window.innerWidth, window.innerHeight)//渲染大小
    document.body.appendChild(renderer.domElement)
    renderer.setClearColor(0xFFFFFF, 1.0)//渲染背景颜色

  }

  //初始化相机
  function initCamera() {
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000)
    camera.position.set(10, 5, 20)
  }

  //初始化场景
  function initScene() {
    scene = new THREE.Scene()
    scene.background = new THREE.Color(0xf0f0f0)
    let axesHelper = new THREE.AxesHelper(50)
    scene.add(axesHelper)
  }

  //初始化光线
  function initLight() {
    //环境光
    light = new THREE.AmbientLight(0x00ff00)
    scene.add(light)

    //方向光
    light = new THREE.DirectionalLight(0xff0000, 1)
    light.position.set(0, 0, 1)
    scene.add(light)
  }

  async function getImage() {
    var image = new Image();
    image.src = "./ThreeJs/images/box1.png"
    return await new Promise(resolve => {
      image.onload = function () {
        //用canvas生成图片
        resolve(this)
      }
    })
  }

  //构建物体
  async function initObject() {
    let geometry = new THREE.BoxGeometry(50, 50, 50)//构建一个正方体
    let material = new THREE.MeshLambertMaterial({ color: 0xffffff })//
    mesh = new THREE.Mesh(geometry, material)
    scene.add(mesh)



    // 
    let canvas = document.getElementById('canvas')
    let ctx = canvas.getContext('2d')
    canvas.width = 300
    canvas.height = 300
    //制作矩形
    ctx.fillStyle = "rgba(255,165,0,0.8)";
    ctx.fillRect(0, 0, 300, 300)

    ctx.drawImage(await getImage(), 0, 0, 300, 300);
    //设置文字
    ctx.fillStyle = "#fff";
    ctx.font = 'normal 43pt "楷体"'
    ctx.fillText('模型介绍', 31, 150)
    //生成图片
    let url = canvas.toDataURL('image/png');


    //将图片构建到纹理中
    let geometry1 = new THREE.PlaneGeometry(30, 30)

    let texture = THREE.ImageUtils.loadTexture(url, null, function (t) { })

    let material1 = new THREE.MeshBasicMaterial({
      map: texture,
      side: THREE.DoubleSide,
      opacity: 1,
      transparent: true,
    })
    let rect = new THREE.Mesh(geometry1, material1)
    rect.position.set(43, 40, 25)
    scene.add(rect)
  }


  //用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放
  function initControls() {
    controls = new THREE.OrbitControls(camera)
    // 如果使用animate方法时，将此函数删除
    //controls.addEventListener( 'change', render );
    // 使动画循环使用时阻尼或自转 意思是否有惯性
    controls.enableDamping = true
    //动态阻尼系数 就是鼠标拖拽旋转灵敏度
    //controls.dampingFactor = 0.25;
    //是否可以缩放
    controls.enableZoom = true
    //是否自动旋转
    //controls.autoRotate = true;
    //设置相机距离原点的最远距离
    controls.minDistance = 200
    //设置相机距离原点的最远距离
    controls.maxDistance = 600
    //是否开启右键拖拽
    controls.enablePan = true
  }

  function animate() {
    //更新控制器
    controls.update()
    requestAnimationFrame(animate)
    renderer.render(scene, camera)
  }

  function main() {
    initRenderer()//渲染器
    initCamera()//相机
    initScene()//场景
    initLight()//光线
    initObject()//物体
    initControls()
    animate()//动画
  }

</script>


</body>

</html>